<template>
	<Root>
		<view class="bluetooth-container">
			<!-- 标题栏 -->
			<view class="header">
				<view class="back-btn" @click="goBack">
					<text class="back-icon">←</text>
				</view>
				<text class="title">蓝牙连接</text>
			</view>

			<!-- 蓝牙状态 -->
			<view class="status-section">
				<view class="status-item clickable" @click="toggleBluetooth">
					<text class="status-label">蓝牙状态:</text>
					<text class="status-value" :class="bluetoothState ? 'enabled' : 'disabled'">
						{{ bluetoothState ? '已开启' : '未开启' }}
					</text>
				</view>
				<view class="status-item" v-if="connectedDevice">
					<text class="status-label">已连接设备:</text>
					<text class="status-value connected">{{ connectedDevice.name || connectedDevice.deviceId }}</text>
				</view>
			</view>

			<!-- 连接管理按钮 -->
			<view class="action-section" v-if="connectedDevice">
				<button class="action-btn danger" @click="disconnectDevice" :disabled="!connectedDevice">
					关闭连接
				</button>
			</view>

			<!-- 发现设备 -->
		<view class="device-section">
			<view class="section-header">
				<text class="section-title">发现设备</text>
				<view class="search-icon" @click="toggleScan" :class="{ disabled: !bluetoothState, scanning: isScanning }">
					<text class="icon" :class="{ rotating: isScanning && devices.length === 0 }" v-if="isScanning">⟳</text>
					<text class="icon stop-icon">⏹</text>
					<text class="icon" v-if="!isScanning">↻</text>
				</view>
			</view>
				<view class="device-list">
					<view v-if="devices.length === 0" class="empty-tip">
						<text>暂无发现设备，请点击搜索设备</text>
					</view>
					<view 
						v-for="device in devices" 
						:key="device.deviceId" 
						class="device-item"
						:class="{ 'connected': connectedDevice && connectedDevice.deviceId === device.deviceId }"
						@click="connectDevice(device)"
					>
						<view class="device-info">
							<text class="device-name">{{ device.name || '未知设备' }}</text>
							<text class="device-id">{{ device.deviceId }}</text>
							<text class="device-rssi">信号强度: {{ device.RSSI }}dBm</text>
						</view>
						<view class="device-action">
							<text v-if="connectedDevice && connectedDevice.deviceId === device.deviceId" class="connected-tag">已连接</text>
							<text v-else class="connect-btn">连接</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 数据监听区域 -->
			<view class="data-section" v-if="connectedDevice">
				<text class="section-title">数据监听</text>
				<view class="data-controls">
					<button class="action-btn small" @click="startNotify" :disabled="isNotifying">
						{{ isNotifying ? '监听中' : '开始监听' }}
					</button>
					<button class="action-btn small danger" @click="stopNotify" :disabled="!isNotifying">
						停止监听
					</button>
					<button class="action-btn small" @click="clearData">
						清空数据
					</button>
				</view>
				<view class="data-display">
					<scroll-view class="data-log" scroll-y="true" :scroll-top="scrollTop">
						<view v-if="receivedData.length === 0" class="empty-tip">
							<text>暂无接收到数据</text>
						</view>
						<view v-for="(data, index) in receivedData" :key="index" class="data-item">
							<text class="data-time">{{ data.time }}</text>
							<text class="data-content">{{ data.content }}</text>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</Root>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import Root from '@/components/layout/_root/Root.vue'

// 响应式数据
const bluetoothState = ref(false)
const isScanning = ref(false)
const isNotifying = ref(false)
const devices = ref<any[]>([])
const connectedDevice = ref<any>(null)
const receivedData = ref<any[]>([])
const scrollTop = ref(0)

// 蓝牙适配器状态监听
const onBluetoothAdapterStateChange = (res: any) => {
	console.log('蓝牙适配器状态变化:', res)
	bluetoothState.value = res.available
}

// 发现新设备监听
const onBluetoothDeviceFound = (res: any) => {
	console.log('发现新设备:', res)
	res.devices.forEach((device: any) => {
		// 避免重复添加设备
		const existIndex = devices.value.findIndex(d => d.deviceId === device.deviceId)
		if (existIndex === -1) {
			devices.value.push(device)
		} else {
			// 更新设备信息
			devices.value[existIndex] = device
		}
	})
}

// 蓝牙连接状态变化监听
const onBLEConnectionStateChange = (res: any) => {
	console.log('蓝牙连接状态变化:', res)
	if (!res.connected) {
		connectedDevice.value = null
		isNotifying.value = false
		uni.showToast({
			title: '设备已断开连接',
			icon: 'none'
		})
	}
}

// 接收蓝牙数据监听
const onBLECharacteristicValueChange = (res: any) => {
	console.log('接收到蓝牙数据:', res)
	const data = {
		time: new Date().toLocaleTimeString(),
		content: arrayBufferToHex(res.value)
	}
	receivedData.value.push(data)
	// 自动滚动到底部
	scrollTop.value = receivedData.value.length * 50
}

// ArrayBuffer转十六进制字符串
const arrayBufferToHex = (buffer: ArrayBuffer): string => {
	const uint8Array = new Uint8Array(buffer)
	return Array.from(uint8Array)
		.map(byte => byte.toString(16).padStart(2, '0'))
		.join(' ')
		.toUpperCase()
}

// 初始化蓝牙
const initBluetooth = async () => {
	try {
		uni.showLoading({ title: '初始化中...' })
		
		// H5环境模拟
		if (isH5.value) {
			// 模拟延迟
			await new Promise(resolve => setTimeout(resolve, 1000))
			bluetoothState.value = true
			uni.hideLoading()
			uni.showToast({
				title: '蓝牙初始化成功(H5模拟)',
				icon: 'success'
			})
			
			// 自动开始搜索设备
			setTimeout(() => {
				startScan()
			}, 500)
			return
		}
		
		// 真机环境
		// 初始化蓝牙适配器
		await new Promise((resolve, reject) => {
			uni.openBluetoothAdapter({
				success: resolve,
				fail: reject
			})
		})
		
		// 获取蓝牙适配器状态
		const adapterState = await new Promise<any>((resolve, reject) => {
			uni.getBluetoothAdapterState({
				success: resolve,
				fail: reject
			})
		})
		
		bluetoothState.value = adapterState.available
		
		uni.hideLoading()
		uni.showToast({
			title: '蓝牙初始化成功',
			icon: 'success'
		})
		
		// 自动开始搜索设备
		if (bluetoothState.value) {
			setTimeout(() => {
				startScan()
			}, 500)
		}
	} catch (error: any) {
		uni.hideLoading()
		console.error('蓝牙初始化失败:', error)
		uni.showToast({
			title: `初始化失败: ${error.errMsg || error.message}`,
			icon: 'none'
		})
	}
}

// 开始搜索设备
const startScan = async () => {
	try {
		isScanning.value = true
		devices.value = []
		
		uni.showLoading({ title: '搜索设备中...' })
		
		// H5环境模拟
		if (isH5.value) {
			// 模拟搜索延迟
			await new Promise(resolve => setTimeout(resolve, 2000))
			
			// 模拟发现设备
			const mockDevices = [
				{
					deviceId: 'mock-device-001',
					name: '模拟蓝牙设备1',
					RSSI: -45
				},
				{
					deviceId: 'mock-device-002',
					name: '模拟蓝牙设备2',
					RSSI: -60
				},
				{
					deviceId: 'mock-device-003',
					name: '智能手环',
					RSSI: -35
				}
			]
			
			devices.value = mockDevices
			uni.hideLoading()
			uni.showToast({
				title: '搜索完成(H5模拟)',
				icon: 'success'
			})
			
			// 10秒后自动停止搜索
			setTimeout(() => {
				if (isScanning.value) {
					stopScan()
				}
			}, 10000)
			return
		}
		
		// 真机环境
		// 开始搜索
		await new Promise((resolve, reject) => {
			uni.startBluetoothDevicesDiscovery({
				services: [], // 空数组表示搜索所有设备
				allowDuplicatesKey: false,
				interval: 0,
				success: resolve,
				fail: reject
			})
		})
		
		uni.hideLoading()
		uni.showToast({
			title: '开始搜索设备',
			icon: 'success'
		})
		
		// 10秒后自动停止搜索
		setTimeout(() => {
			if (isScanning.value) {
				stopScan()
			}
		}, 10000)
	} catch (error: any) {
		uni.hideLoading()
		isScanning.value = false
		console.error('搜索设备失败:', error)
		uni.showToast({
			title: `搜索失败: ${error.errMsg || error.message}`,
			icon: 'none'
		})
	}
}

// 停止搜索设备
const stopScan = () => {
	try {
		// H5环境模拟
		if (isH5.value) {
			isScanning.value = false
			uni.showToast({
				title: '已停止搜索设备',
				icon: 'success'
			})
			return
		}
		
		// 真机环境
		uni.stopBluetoothDevicesDiscovery({
			success: () => {
				isScanning.value = false
				uni.showToast({
					title: '已停止搜索设备',
					icon: 'success'
				})
			},
			fail: (error: any) => {
				console.error('停止搜索失败:', error)
				uni.showToast({
					title: `停止失败: ${error.errMsg}`,
					icon: 'none'
				})
			}
		})
	} catch (error: any) {
		console.error('停止搜索异常:', error)
		uni.showToast({
			title: '停止搜索失败',
			icon: 'none'
		})
	}
}

// 切换蓝牙状态
const toggleBluetooth = async () => {
	if (bluetoothState.value) {
		await closeBluetooth()
	} else {
		await initBluetooth()
	}
}

// 切换搜索状态
const toggleScan = () => {
	if (isScanning.value) {
		stopScan()
	} else {
		startScan()
	}
}

// 连接设备
const connectDevice = async (device: any) => {
	try {
		uni.showLoading({ title: '连接中...' })
		
		// 停止搜索
		if (isScanning.value) {
			stopScan()
		}
		
		// H5环境模拟
		if (isH5.value) {
			// 模拟连接延迟
			await new Promise(resolve => setTimeout(resolve, 1500))
			
			// 模拟连接成功
			connectedDevice.value = {
				...device,
				services: [
					{
						serviceId: 'mock-service-001',
						characteristics: [
							{
								uuid: 'mock-char-001',
								properties: {
									notify: true,
									read: true,
									write: true
								}
							}
						]
					}
				]
			}
			
			uni.hideLoading()
			uni.showToast({
				title: '连接成功(H5模拟)',
				icon: 'success'
			})
			return
		}
		
		// 真机环境
		// 连接设备
		await new Promise((resolve, reject) => {
			uni.createBLEConnection({
				deviceId: device.deviceId,
				success: resolve,
				fail: reject
			})
		})
		
		connectedDevice.value = device
		
		uni.hideLoading()
		uni.showToast({
			title: '连接成功',
			icon: 'success'
		})
		
		// 获取服务
		await getServices(device.deviceId)
	} catch (error: any) {
		uni.hideLoading()
		console.error('连接设备失败:', error)
		uni.showToast({
			title: `连接失败: ${error.errMsg || error.message}`,
			icon: 'none'
		})
	}
}

// 获取设备服务
const getServices = async (deviceId: string) => {
	try {
		const services = await new Promise<any>((resolve, reject) => {
			uni.getBLEDeviceServices({
				deviceId,
				success: resolve,
				fail: reject
			})
		})
		
		console.log('设备服务:', services)
		
		// 获取特征值
		for (const service of services.services) {
			await getCharacteristics(deviceId, service.uuid)
		}
	} catch (error) {
		console.error('获取服务失败:', error)
	}
}

// 获取特征值
const getCharacteristics = async (deviceId: string, serviceId: string) => {
	try {
		const characteristics = await new Promise<any>((resolve, reject) => {
			uni.getBLEDeviceCharacteristics({
				deviceId,
				serviceId,
				success: resolve,
				fail: reject
			})
		})
		
		console.log('特征值:', characteristics)
		
		// 保存特征值信息到设备对象
		if (connectedDevice.value) {
			if (!connectedDevice.value.services) {
				connectedDevice.value.services = []
			}
			connectedDevice.value.services.push({
				serviceId,
				characteristics: characteristics.characteristics
			})
		}
	} catch (error) {
		console.error('获取特征值失败:', error)
	}
}

// 模拟数据定时器
let mockDataTimer: any = null

// 开始监听数据
const startNotify = async () => {
	if (!connectedDevice.value || !connectedDevice.value.services) {
		uni.showToast({
			title: '请先连接设备',
			icon: 'none'
		})
		return
	}
	
	try {
		// H5环境模拟
		if (isH5.value) {
			isNotifying.value = true
			uni.showToast({
				title: '开始监听数据(H5模拟)',
				icon: 'success'
			})
			
			// 模拟定时接收数据
			mockDataTimer = setInterval(() => {
				if (isNotifying.value) {
					const mockData = {
						time: new Date().toLocaleTimeString(),
						content: generateMockData()
					}
					receivedData.value.push(mockData)
					// 自动滚动到底部
					scrollTop.value = receivedData.value.length * 50
				}
			}, 2000) // 每2秒模拟接收一次数据
			return
		}
		
		// 真机环境
		// 查找可通知的特征值
		let notifyCharacteristic = null
		let serviceId = ''
		
		for (const service of connectedDevice.value.services) {
			for (const char of service.characteristics) {
				if (char.properties.notify || char.properties.indicate) {
					notifyCharacteristic = char
					serviceId = service.serviceId
					break
				}
			}
			if (notifyCharacteristic) break
		}
		
		if (!notifyCharacteristic) {
			uni.showToast({
				title: '设备不支持数据通知',
				icon: 'none'
			})
			return
		}
		
		// 启用通知
		await new Promise((resolve, reject) => {
			uni.notifyBLECharacteristicValueChange({
				deviceId: connectedDevice.value.deviceId,
				serviceId,
				characteristicId: notifyCharacteristic.uuid,
				state: true,
				success: resolve,
				fail: reject
			})
		})
		
		isNotifying.value = true
		uni.showToast({
			title: '开始监听数据',
			icon: 'success'
		})
	} catch (error: any) {
		console.error('开始监听失败:', error)
		uni.showToast({
			title: `监听失败: ${error.errMsg || error.message}`,
			icon: 'none'
		})
	}
}

// 生成模拟数据
const generateMockData = (): string => {
	const mockHexData = [
		'AA BB CC DD EE FF',
		'01 02 03 04 05 06',
		'FF EE DD CC BB AA',
		'12 34 56 78 9A BC',
		'A1 B2 C3 D4 E5 F6'
	]
	return mockHexData[Math.floor(Math.random() * mockHexData.length)]
}

// 停止监听数据
const stopNotify = () => {
	isNotifying.value = false
	
	// 清理H5模拟定时器
	if (mockDataTimer) {
		clearInterval(mockDataTimer)
		mockDataTimer = null
	}
	
	uni.showToast({
		title: '停止监听',
		icon: 'success'
	})
}

// 清空数据
const clearData = () => {
	receivedData.value = []
	scrollTop.value = 0
}

// 返回上一页
const goBack = () => {
	uni.navigateBack()
}

// 关闭设备连接
const disconnectDevice = async () => {
	if (!connectedDevice.value) {
		uni.showToast({
			title: '没有已连接的设备',
			icon: 'none'
		})
		return
	}
	
	try {
		uni.showLoading({ title: '断开连接中...' })
		
		// 停止数据监听
		if (isNotifying.value) {
			stopNotify()
		}
		
		// H5环境模拟
		if (isH5.value) {
			// 模拟断开延迟
			await new Promise(resolve => setTimeout(resolve, 1000))
			
			connectedDevice.value = null
			
			uni.hideLoading()
			uni.showToast({
				title: '连接已断开(H5模拟)',
				icon: 'success'
			})
			return
		}
		
		// 真机环境
		await new Promise((resolve, reject) => {
			uni.closeBLEConnection({
				deviceId: connectedDevice.value.deviceId,
				success: resolve,
				fail: reject
			})
		})
		
		connectedDevice.value = null
		
		uni.hideLoading()
		uni.showToast({
			title: '连接已断开',
			icon: 'success'
		})
	} catch (error: any) {
		uni.hideLoading()
		console.error('断开连接失败:', error)
		uni.showToast({
			title: `断开失败: ${error.errMsg || error.message}`,
			icon: 'none'
		})
	}
}

// 关闭蓝牙适配器
const closeBluetooth = async () => {
	if (!bluetoothState.value) {
		uni.showToast({
			title: '蓝牙未开启',
			icon: 'none'
		})
		return
	}
	
	try {
		uni.showLoading({ title: '关闭蓝牙中...' })
		
		// 停止搜索
		if (isScanning.value) {
			stopScan()
		}
		
		// 断开连接
		if (connectedDevice.value) {
			await disconnectDevice()
		}
		
		// H5环境模拟
		if (isH5.value) {
			// 模拟关闭延迟
			await new Promise(resolve => setTimeout(resolve, 1000))
			
			bluetoothState.value = false
			devices.value = []
			connectedDevice.value = null
			
			uni.hideLoading()
			uni.showToast({
				title: '蓝牙已关闭(H5模拟)',
				icon: 'success'
			})
			return
		}
		
		// 真机环境
		await new Promise((resolve, reject) => {
			uni.closeBluetoothAdapter({
				success: resolve,
				fail: reject
			})
		})
		
		bluetoothState.value = false
		devices.value = []
		connectedDevice.value = null
		
		uni.hideLoading()
		uni.showToast({
			title: '蓝牙已关闭',
			icon: 'success'
		})
	} catch (error: any) {
		uni.hideLoading()
		console.error('关闭蓝牙失败:', error)
		uni.showToast({
			title: `关闭失败: ${error.errMsg || error.message}`,
			icon: 'none'
		})
	}
}

// 检测是否为H5环境
const isH5 = ref(false)

// 页面生命周期
onMounted(() => {
	// 检测运行环境
	// #ifdef H5
	isH5.value = true
	console.log('当前运行在H5环境，蓝牙功能仅为演示')
	// #endif
	
	// 只在非H5环境注册蓝牙监听器
	if (!isH5.value) {
		// 监听蓝牙适配器状态变化
		uni.onBluetoothAdapterStateChange && uni.onBluetoothAdapterStateChange(onBluetoothAdapterStateChange)
		// 监听发现新设备
		uni.onBluetoothDeviceFound && uni.onBluetoothDeviceFound(onBluetoothDeviceFound)
		// 监听蓝牙连接状态变化
		uni.onBLEConnectionStateChange && uni.onBLEConnectionStateChange(onBLEConnectionStateChange)
		// 监听蓝牙数据变化
		uni.onBLECharacteristicValueChange && uni.onBLECharacteristicValueChange(onBLECharacteristicValueChange)
	}
})

onUnmounted(() => {
	// 清理资源
	if (isScanning.value) {
		stopScan()
	}
	
	// 停止数据监听
	if (isNotifying.value) {
		stopNotify()
	}
	
	// 只在非H5环境清理蓝牙资源
	if (!isH5.value) {
		if (connectedDevice.value) {
			uni.closeBLEConnection({
				deviceId: connectedDevice.value.deviceId
			})
		}
		uni.closeBluetoothAdapter && uni.closeBluetoothAdapter()
	}
})
</script>

<style lang="scss" scoped>
.bluetooth-container {
	padding: 20rpx;
	min-height: 100vh;
	background-color: #f5f5f5;
}

.header {
	display: flex;
	align-items: center;
	padding: 20rpx 0;
	margin-bottom: 30rpx;
	border-bottom: 1px solid #e0e0e0;
	
	.back-btn {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background-color: #fff;
		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
		
		.back-icon {
			font-size: 32rpx;
			color: #333;
		}
	}
	
	.title {
		flex: 1;
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-right: 60rpx;
	}
}

.status-section {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
	
	.status-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		position: relative;
		
		&:last-child {
			margin-bottom: 0;
		}
		
		&.clickable {
			cursor: pointer;
			padding: 15rpx;
			border-radius: 12rpx;
			transition: background-color 0.2s ease;
			
			&:hover {
				background-color: #f8f9fa;
			}
			
			&:active {
				background-color: #e9ecef;
			}
		}
		
		.status-label {
			font-size: 28rpx;
			color: #666;
		}
		
		.status-value {
			font-size: 28rpx;
			font-weight: bold;
			
			&.enabled {
				color: #4CAF50;
			}
			
			&.disabled {
				color: #F44336;
			}
			
			&.connected {
				color: #2196F3;
			}
		}
		

	}
}

.action-section {
	display: flex;
	flex-wrap: wrap;
	gap: 20rpx;
	margin-bottom: 30rpx;
	
	.action-btn {
			flex: 1;
			min-width: 200rpx;
			height: 80rpx;
			border-radius: 12rpx;
			border: 2rpx solid #2196F3;
			font-size: 28rpx;
			font-weight: bold;
			color: #2196F3;
			background: linear-gradient(135deg, #ffffff, #f8f9fa);
			box-shadow: 0 6rpx 16rpx rgba(33, 150, 243, 0.15);
			transition: all 0.3s ease;
			text-shadow: none;
		
		&:hover {
			background: linear-gradient(135deg, #2196F3, #1976D2);
			color: #ffffff;
			transform: translateY(-2rpx);
			box-shadow: 0 8rpx 20rpx rgba(33, 150, 243, 0.3);
		}
		
		&:active {
			transform: translateY(0);
			box-shadow: 0 4rpx 12rpx rgba(33, 150, 243, 0.3);
		}
		
		&.primary {
			color: #4CAF50;
			border-color: #4CAF50;
			background: linear-gradient(135deg, #ffffff, #f8f9fa);
			box-shadow: 0 6rpx 16rpx rgba(76, 175, 80, 0.15);
			
			&:hover {
				background: linear-gradient(135deg, #4CAF50, #388E3C);
				color: #ffffff;
				box-shadow: 0 8rpx 20rpx rgba(76, 175, 80, 0.3);
			}
			
			&:active {
				box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.3);
			}
		}
		
		&.danger {
			color: #F44336;
			border-color: #F44336;
			background: linear-gradient(135deg, #ffffff, #f8f9fa);
			box-shadow: 0 6rpx 16rpx rgba(244, 67, 54, 0.15);
			
			&:hover {
				background: linear-gradient(135deg, #F44336, #D32F2F);
				color: #ffffff;
				box-shadow: 0 8rpx 20rpx rgba(244, 67, 54, 0.3);
			}
			
			&:active {
				box-shadow: 0 4rpx 12rpx rgba(244, 67, 54, 0.3);
			}
		}
		
		&.small {
			flex: none;
			width: 160rpx;
			height: 60rpx;
			font-size: 24rpx;
			font-weight: 600;
		}
		
		&:disabled {
			background: #ccc;
			color: #999;
			box-shadow: none;
			text-shadow: none;
			transform: none;
			border-color: #ddd;
		}
	}
}

.device-section, .data-section {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
	
	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		
		.section-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin: 0;
		}
		
		.search-icon {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			transition: all 0.2s ease;
			position: relative;
			
			.icon {
				font-size: 32rpx;
				color: #2196F3;
				font-weight: bold;
				transition: all 0.2s ease;
			}
			
			.stop-icon {
				display: none;
				color: #f44336;
			}
			
			&:hover {
				background-color: rgba(33, 150, 243, 0.1);
				
				.icon {
					color: #1976D2;
				}
			}
			
			&:hover {
				.icon:not(.stop-icon) {
					display: none;
				}
				
				.stop-icon {
					display: block;
				}
			}
			
			&:not(.scanning):hover {
				.icon:not(.stop-icon) {
					display: block;
				}
				
				.stop-icon {
					display: none;
				}
			}
			
			&:active {
				background-color: rgba(33, 150, 243, 0.2);
			}
			
			&.disabled {
				cursor: not-allowed;
				
				.icon {
					color: #ccc;
				}
				
				&:hover {
					background-color: transparent;
					
					.icon {
						color: #ccc;
					}
				}
			}
		}
	}
	
	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		display: block;
	}
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.rotating {
	animation: rotate 1s linear infinite !important;
}

.device-list {
	.empty-tip {
		text-align: center;
		padding: 60rpx 0;
		color: #999;
		font-size: 28rpx;
	}
	
	.device-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 20rpx;
		margin-bottom: 20rpx;
		border-radius: 12rpx;
		background-color: #f9f9f9;
		border: 2rpx solid transparent;
		transition: all 0.3s;
		
		&:last-child {
			margin-bottom: 0;
		}
		
		&.connected {
			background-color: #e3f2fd;
			border-color: #2196F3;
		}
		
		.device-info {
			flex: 1;
			
			.device-name {
				font-size: 30rpx;
				font-weight: bold;
				color: #333;
				display: block;
				margin-bottom: 10rpx;
			}
			
			.device-id {
				font-size: 24rpx;
				color: #666;
				display: block;
				margin-bottom: 5rpx;
			}
			
			.device-rssi {
				font-size: 22rpx;
				color: #999;
				display: block;
			}
		}
		
		.device-action {
			.connected-tag {
				color: #4CAF50;
				font-size: 24rpx;
				font-weight: bold;
			}
			
			.connect-btn {
				color: #2196F3;
				font-size: 28rpx;
				font-weight: bold;
			}
		}
	}
}

.data-controls {
	display: flex;
	gap: 20rpx;
	margin-bottom: 20rpx;
}

.data-display {
	.data-log {
		height: 400rpx;
		border: 1rpx solid #e0e0e0;
		border-radius: 8rpx;
		padding: 20rpx;
		background-color: #fafafa;
		
		.empty-tip {
			text-align: center;
			padding: 100rpx 0;
			color: #999;
			font-size: 28rpx;
		}
		
		.data-item {
			margin-bottom: 20rpx;
			padding: 15rpx;
			background-color: #fff;
			border-radius: 8rpx;
			border-left: 4rpx solid #2196F3;
			
			.data-time {
				font-size: 22rpx;
				color: #999;
				display: block;
				margin-bottom: 8rpx;
			}
			
			.data-content {
				font-size: 26rpx;
				color: #333;
				font-family: 'Courier New', monospace;
				word-break: break-all;
				display: block;
			}
		}
	}
}
</style>